SHARE
Facebook X Pinterest WhatsApp

How to Create Jump Links with HTML

Written By
thumbnail
Joe Burns
Joe Burns
Jan 4, 2005


I get letters about how to do these internal page jumps all the
time. These are a great way to allow people to move quickly
inside a long page. I have them all
over my HTML Goodies tutorials.



Here’s what I’m talking about:



Click Here to visit
the bottom of this
page.



Here’s how ya do it…

You need to place two items on each page:


1. A basic link command pointing to another section of the
page.

2. The point where the page will jump.

Here’s the basic link command:


<A HREF=”#codeword”>Blue Words,
Blue Words
</A>

Here’s how you denote where the jump will scroll the page:



<A NAME=”codeword”>



Here’s what’s happening



    • The A HREF command is the same as a basic link except
      the link is to a codeword rather than a URL.
    • PLEASE NOTICE there is a # sign in front of the
      codeword. You need that to denote it is an internal link.
      Without the # sign, the browser looks for something outside
      the page named after your codeword. …and it ain’t gonna be
      there.
    • Your “codeword” can be just about anything you want. I try
      my best to keep it short and make it denote what it is jumping
      to. There might be a limit to the number of letters you can
      use–but I haven’t found it yet.
    • The point where the page will jump follows the same general
      format except you will replace the word HREF with the word
      NAME.
    • PLEASE NOTICE there is no # sign in the NAME
      command.
    • Note! Where you place the NAME target will appear at
      the top of the screen browser.


Jumping from another page



Let’s say you have a tutorial–much the same as this one–and you
will be jumping from page to page. It would make things a lot
easier if, when you jump between pages, you could have the
jumped-to page load at a specific point rather than loading at
the top each time. Well, you can…


See the words “Welcome Back!” a few lines down? Well, I’m going
to have you jump to a new page where it will explain the process
and then you will jump back so “Welcome Back” appears at the top
of the browser screen.


So here we go




Click Here to Go


Welcome Back!


I knew I

d see you again.

So…do ya got it? Good. Thanks
for coming.



Hi There…

…and welcome to the bottom of the page



No, seriously…you’re at the bottom of the same page. Look at
the scroll bar on the right. Now the square marker is towards
the bottom. Do you want to learn how to do this?

Click Here to go
back to the
top.

Recommended for you...

Best JavaScript Frameworks & Libraries for Building Web Dashboards
Rob Gravelle
Jul 29, 2021
Google Web Vitals for Beginners
Diogo Souza
May 4, 2021
Web Site Maintainability
Vince Barnes
Jan 10, 2021
Getting Started with Grunt.js
Diogo Souza
Oct 8, 2018
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.